window.onload=function(){
          var box=document.getElementById("banner");
          var ulL=document.getElementById("ulList");
          var ulLis=ulL.children;
          var timer=null;
          var key=0;
          timer=setInterval(autoplay,4000);
          function autoplay(){
                  key++;
                  if(key>ulLis.length-1){
                       ulL.style.left=0;
                       key=1;
                  }
                animate(ulL,-key*ulLis[0].offsetWidth);

           }

box.onmouseover = function() {
    clearInterval(timer);
}
box.onmouseout = function() {
    timer = setInterval(autoplay, 4000);  // 一定这么开
}
    function animate(obj,target) {
        clearInterval(obj.timer);  // 要开启定时器，先清除以前定时器
        // 有2个参数 第一个 对象谁做动画  第二 距离 到哪里
        // 如果 offsetLeft 大于了  target 目标位置就应该反方向
        var speed = obj.offsetLeft < target ? 15 : -15;
        obj.timer = setInterval(function() {
            var result = target - obj.offsetLeft;  //  他们的值 等于 0 说明完全相等
            // 动画的原理
            obj.style.left = obj.offsetLeft + speed  + "px";
            if(Math.abs(result) <= 15) {
                obj.style.left = target + "px";   //抖动问题
                clearInterval(obj.timer);
            }
        },5);

}

    var myprev=document.getElementById("myprev");
    var mynext=document.getElementById("mynext");
    var tempIndex=0;
    myprev.onclick=function(){
            tempIndex--;
        tempIndex<=0? tempIndex=0:tempIndex;

        animate(ulL,-tempIndex*ulLis[0].offsetWidth);


    }

    mynext.onclick=function(){
        tempIndex++;

        tempIndex >= 5? tempIndex =5: tempIndex;
        animate(ulL,-tempIndex*ulLis[0].offsetWidth);


    }



}